{#
/**
 * @file
 * image--placeholder
 *   Implements holder.js for placeholder images.
 *
 * Available variables for image:
 *  - Inherit variables from @atoms/_image.twig
 */
#}
{% import _self as self %}
{% macro get_placeholder_src(placeholderStyle) %}
{% if not placeholderStyle.height %}
  {% set height = random(range(placeholderStyle.width * 0.75, placeholderStyle.width * 1.25, 10)) %}
  {% set placeholderStyle = placeholderStyle|merge({height: height}) %}
  {% set placeholderText = placeholderStyle.width ~ 'wide, height varies' %}
{% endif %}
{% set placeholderStyleName =  placeholderStyle.label is not empty ? placeholderStyle.label : placeholderStyleKey %}
{% set placeholderText = placeholderStyle.width ~ 'x' ~ placeholderStyle.height %}
{% set options = {
  text: placeholderStyleName ~ ' \n (' ~ placeholderText ~ ')',
} %}
{% set imgSrc = 'https://via.placeholder.com/' ~ placeholderStyle.width ~ 'x' ~ placeholderStyle.height|round ~ '?' ~ options|url_encode %}
{{- imgSrc -}}
{% endmacro %}
{% macro get_holderjs_src(placeholderStyle) %}
{# if there's no height, let's randomly get one somewhere between .75 and 1.25 times the width, in increments of 10 #}
{% if not placeholderStyle.height %}
  {% set height = random(range(placeholderStyle.width * 0.75, placeholderStyle.width * 1.25, 10)) %}
  {% set placeholderStyle = placeholderStyle|merge({height: height}) %}
  {% set placeholderText = placeholderStyle.width ~ 'wide, height varies' %}
{% endif %}
{% set placeholderStyleName =  placeholderStyle.label is not empty ? placeholderStyle.label : placeholderStyleKey %}
{% set placeholderText = placeholderStyle.width ~ 'x' ~ placeholderStyle.height %}
{# holder.js options #}
{% set options = {
  theme: 'gray',
  auto: 'yes',
  size: '8',
  lineWrap: '.9',
  text: placeholderStyleName ~ ' \n (' ~ placeholderText ~ ')',
} %}
{% set imgSrc = 'https://via.placeholder.com//' ~ placeholderStyle.width ~ 'x' ~ placeholderStyle.height|round ~ '?' ~ options|url_encode %}
{{- imgSrc -}}
{% endmacro %}

{% set placeholderStyleKey = style|default('16x9_xxxs_sc') %}
{% set isResponsiveImage = false %}

{% set imageStyles = imageConfig.styles %}
{% set imageStylesResponsive = imageConfig.stylesResponsive %}
{% set imageBreakpoints = imageConfig.breakpoints %}
{% set placeholderStyle = imageStyles[placeholderStyleKey] %}
{% if placeholderStyle is empty %}
  {% set placeholderStyle = imageStylesResponsive[placeholderStyleKey] %}
  {% set isResponsiveImage = placeholderStyle != null ? true : false %}
{% endif %}


{% if placeholderStyle is empty %}
No image style {{ style }} found!
{% else %}
  {% if isResponsiveImage == false %}
    {% set imgSrc = self.get_holderjs_src(placeholderStyle) %}
    {% if variant == 'primary' %}
      <img {% if circle == true %} class="rounded-full" {% endif %} src="{{- imgSrc|trim -}}" alt="A placeholder image">
    {% elseif variant == 'bg' %}
      <div data-background-src="?{{- imgSrc -}}" class="bg-img {{ image_classes }}"></div>
    {% endif %}

  {% else %}
    {% set baseImageStyle = imageStyles[placeholderStyle.style] %}
    <picture>
      {% for breakpointName, imageStyleName in placeholderStyle.breakpoints %}
        {% set breakpoint = imageBreakpoints[breakpointName] %}
        {% set imageStyle = imageStyles[imageStyleName] %}
        <source srcset="{{- self.get_placeholder_src(imageStyle) -}}" media="{{ breakpoint.mediaQuery }}">
      {% endfor %}
      <img data-src="{{- self.get_holderjs_src(baseImageStyle) -}}" alt="MDN">
    </picture>
  {% endif %}
{% endif %}
